"use client"; // 需使用useWallet，必须是客户端组件

import { useState } from "react";
import { useWallet } from "@/context/WalletContext";
import { FiCreditCard, FiLogOut, FiMenu, FiX } from "react-icons/fi";

export default function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // 移动端菜单开关
  const { address, connectWallet, disconnectWallet, isLoading, error } = useWallet();

  // 格式化钱包地址（显示前6位+后4位，如0x1234...5678）
  const formatAddress = (addr: string) => {
    return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
  };

  return (
    <nav className="border-b bg-white dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          {/* 左侧Logo */}
          <div className="flex items-center">
            <a href="/" className="text-xl font-bold text-indigo-600 dark:text-indigo-400">
              ChainTrack
            </a>
          </div>

          {/* 桌面端：钱包按钮 */}
          <div className="hidden md:flex items-center space-x-4">
            {error && (
              <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
            )}
            <button
              onClick={address ? disconnectWallet : connectWallet}
              disabled={isLoading}
              className="flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 disabled:opacity-50"
            >
              {isLoading ? (
                "Processing..."
              ) : address ? (
                <>
                  <FiLogOut size={16} />
                  {formatAddress(address)}
                </>
              ) : (
                <>
                  <FiCreditCard size={16} />
                  Connect Wallet
                </>
              )}
            </button>
          </div>

          {/* 移动端：菜单按钮 */}
          <div className="md:hidden flex items-center">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="p-2 rounded-md text-gray-500 dark:text-gray-400"
            >
              {mobileMenuOpen ? <FiX size={24} /> : <FiMenu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* 移动端：下拉菜单 */}
      {mobileMenuOpen && (
        <div className="md:hidden border-t dark:border-gray-800">
          <div className="px-4 py-3 space-y-3">
            {error && (
              <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
            )}
            <button
              onClick={() => {
                address ? disconnectWallet() : connectWallet();
                setMobileMenuOpen(false); // 点击后关闭菜单
              }}
              disabled={isLoading}
              className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 disabled:opacity-50"
            >
              {isLoading ? (
                "Processing..."
              ) : address ? (
                <>
                  <FiLogOut size={16} />
                  {formatAddress(address)}
                </>
              ) : (
                <>
                  <FiCreditCard size={16} />
                  Connect Wallet
                </>
              )}
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}
